import React, { useState, useEffect } from 'react'
import { View, Button, Image, Text } from '@tarojs/components'
import { AtDivider, AtMessage } from 'taro-ui'
import EChart from 'techarts'
import Taro from '@tarojs/taro'
// 自定义构建的echarts
import * as echarts from './../../echarts'
import { getVideoHistory } from '../../../../api/index'

export default (props) => {
  const { id } = props
  const [option, setOption] = useState({
    title: {
      top: 0,
      left: 'center',
      text: '粉丝数据（单位:十万）'
    },
    xAxis: {
      type: 'category',
      data: ['2020']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [] as Array<number>,
        type: 'line'
      }
    ]
  })

  const [option_2, setOption_2] = useState({
    title: {
      top: 0,
      left: 'center',
      text: '每期视频粉丝涨跌数据（单位:千）'
    },
    xAxis: {
      type: 'category',
      data: ['2020']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [] as Array<number>,
        type: 'line'
      }
    ]
  })

  useEffect(() => {
    ;(async () => {
      let xArea = [] as Array<string>
      let yArea = [] as Array<number>
      let xAreaInc = [] as Array<string>
      let yAreaInc = [] as Array<number>

      const {
        data: { data, errorCode, errorMessage }
      } = await getVideoHistory({
        id,
        days: 7
      })
      if (!errorCode) {
        const { fans, fansInc } = data
        fans.reverse().forEach((item) => {
          xArea.push(item.row)
          yArea.push(item.value / 100000)
        })

        fansInc.reverse().forEach((item) => {
          xAreaInc.push(item.row)
          yAreaInc.push(item.value / 1000)
        })
      } else {
        Taro.atMessage({
          message: errorMessage + '，请充值',
          type: 'error'
        })
      }

      setOption({
        ...option,
        xAxis: {
          type: 'category',
          data: xArea
        },
        series: [
          {
            data: yArea,
            type: 'line'
          }
        ]
      })

      setOption_2({
        ...option_2,
        xAxis: {
          type: 'category',
          data: xAreaInc
        },
        series: [
          {
            data: yAreaInc,
            type: 'line'
          }
        ]
      })
    })()
  }, [id])

  const onInit = (canvas, width, height, dpr) => {
    const chart = echarts.init(canvas, 'light', {
      width: width,
      height: height,
      devicePixelRatio: dpr // new
    })
    return chart // 必须return
  }

  return (
    <View>
      <View className="page-index">
        <View className="line-chart">
          {/* 通过 option 设置数据 */}
          <EChart echarts={echarts} option={option} onInit={onInit} />
        </View>
      </View>
      <View className="page-index">
        <View className="line-chart">
          {/* 通过 option 设置数据 */}
          <EChart echarts={echarts} option={option_2} onInit={onInit} />
        </View>
      </View>
    </View>
  )
}

// return (
//   <View className="page-index">
//     <View className="line-chart">
//       {/* 通过 option 设置数据 */}
//       <EChart echarts={echarts} option={option} onInit={onInit} />
//     </View>
//   </View>
// )
